<template>
	<div class="classification clear">
		<nav class="classNav fl">
			<div v-for="(item, index) in firstList" v-bind:id="item.id"  @click='tabToggle(index,item.id);' v-bind:class="{active : (type == index)}">{{ item.categoryName }}</div>
		</nav>
		<div class="classify-container fl">
			<ul class="item-list clear">
				<li class="item fl" v-for="(item, index) in secondList"><router-link :to='{path: "classificationList", query: {id: item.id}}'><img :src="item.categoryImage"/><p>{{item.categoryName}}</p></router-link></li>
			</ul>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'

	export default {
		data () {return {
		  firstList:[],
		  secondList:[],
		  type:0,
		  categoryId:'',
		}},
		name: 'app',
		mounted:function () {
		  this.$nextTick(function () {
			this.classificationView();
		  })
		},
		methods:{
		  classificationView:function () {
			var _this = this;

			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/category/parent").then(function (res) {
			  _this.firstList = res.body.content;

			});
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/category/sub/2").then(function (res) {
			  _this.secondList = res.body.content;

			});
		  },
		  tabToggle:function(index,id){
			this.type = index;
			this.categoryId = id;
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/category/sub/"+this.categoryId).then(function (res) {
			  this.secondList = res.body.content;

			});
		  }
		}
	}
</script>
<style lang="scss">
.classification{
	width:100%; height:100%;
	.classNav{
		width: 1.83rem; height: 100%;
		div{ width: 1.83rem; height: 1.08rem; border-bottom: 2px solid #fff; font-size: 0.3rem; text-align: center; line-height: 1.08rem; color: #333; background: #f4f5f5;}
		.active{ color: #ff365d; background: #fff;}
	}
	.classify-container{
    width: calc(100% - 1.83rem); height: 100%; background:#fff; overflow-y:scroll;
		.item-list{
			width:100%; margin:0 auto; padding:0.1rem 0;
			li{
				width:calc((100% - 0.6rem)/3); height: 2.12rem; margin: 0.1rem 0.08rem; border: 0.02rem solid #f1f1f1;
				a{
					display:block; width:100%; height:2.12rem;
					img{ display: block; width: 94%; height: 1.58rem; margin: 0 auto;}
					p{ width: 100%; font-size: 0.24rem; line-height: 0.52rem; text-align: center; color: #333;}
				}
			}
		}
	}
}
</style>

